Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EPMRPP-90262 || Setup tests for UI-kit and cover Button component #61

Conversation

iso9000t
Copy link
Contributor

@iso9000t iso9000t commented Jan 3, 2025

[UI] Setup tests for UI-kit and cover Button component with tests

Implementation details

Set up testing environment and implemented comprehensive test coverage for the Button component according to JIRA requirements.

Testing Setup

  • Selected and configured testing libraries:
    • Vitest as test runner
    • React Testing Library for component testing
    • Testing Library Jest DOM for DOM matchers
  • Added test configuration files:
    • vitest.config.ts
    • src/test/setup.ts
  • Added test scripts to package.json:
    • test - for development mode
    • test:coverage - for coverage reporting
    • test:ci - for CI environment
    • test:ui - for Vitest UI mode

image

Button Component Coverage

Achieved 100% coverage for Button component files:

  • button.tsx - 100% (statements, branches, functions, lines)
  • index.ts - 100% (statements, branches, functions, lines)

Test Organization

Implemented structured test suites:

  1. "Button Component" suite with comprehensive testing:
    • Exports (named export, default export, types)
    • Rendering
    • Variants
    • States
    • Interactions
    • Styling
    • Icon Handling

Test Results

  • Total test files: 1
  • Total tests: 18
  • Coverage: 100% for Button component
  • All tests passing

image

No new ESlint warnings and no ESlint errors

image

Related Ticket

[EPM-RPP-90262] - [UI] Setup tests for UI-kit and cover Button component with them https://jiraeu.epam.com/browse/EPMRPP-90262

Copy link
Member

@AmsterGet AmsterGet left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good work, thanks!

I guess it would be useful to include the list of testing tools used and the npm scripts description to the project's readme file.

Also please exclude tests-related stuff from the dist output folder.

src/components/button/index.test.ts Outdated Show resolved Hide resolved
vitest.config.ts Show resolved Hide resolved
README.md Outdated Show resolved Hide resolved
vitest.config.ts Outdated Show resolved Hide resolved
@AmsterGet AmsterGet merged commit 4ee6bbc into develop Jan 7, 2025
1 check passed
@AmsterGet AmsterGet deleted the feature/EPMRPP-90262-setup-tests-ui-kit-cover-button-component branch January 7, 2025 17:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants